<style scoped lang="scss">
.addressadd {
  background-color: $white-color;
  height: 94vh;
  padding-top: 1.0667rem;

  .addressadd-input-item {
    width: 9rem;
    height: 1.1733rem;
    display: flex;
    margin: 0 auto;
    align-items: center;
    border-bottom: 0.0533rem solid #e5e5e5;


    p {
      font-size: .4267rem;
      margin-right: 0.5rem;
      font-weight: 400;
      display: inline-block;
      width: 1.8rem;
      color: #a19f9f;
    }

    input {
      width: 7rem;
      height: 0.8rem;
      border: 0;
      outline: none;
      background-color: #ffffff00;
    }

    select {
      width: 7rem;
      height: 0.8rem;
      border: 0;
      outline: none;
      background-color: #ffffff00;
    }
  }

  .addressadd-input-checkbox {
    width: 9rem;
    height: 1.1733rem;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;

    p {
      font-size: .4267rem;
      margin-right: 0.5rem;
      font-weight: 400;
      display: inline-block;
      color: #323233;
    }
  }

  .addressadd-submit {
    width: 9rem;
    height: 4.6667rem;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    align-items: center;
    justify-content: center;

    button {
      width: 9rem;
      height: 1.1733rem;
      background-color: #ee0a24;
      color: $white-color;
      font-size: 0.4267rem;
      border-radius: 1rem;
      border: 0;
      margin-bottom: 0.5rem;
    }

    button:nth-child(2) {
      background-color: #fff;
      border: .0267rem solid #ccc;
      color: black;
    }
  }
}
</style>
<template>
  <div class="addressadd">
    <vueHeader title="编辑收货地址" path="addresslist"></vueHeader>
    <!-- 三个输入框 -->
    <div class="addressadd-input">
      <div class="addressadd-input-item">
        <p>
          姓名
        </p>
        <input type="text" placeholder="收货人姓名" v-model="list.username">
      </div>
      <div class="addressadd-input-item">
        <p>
          电话
        </p>
        <input type="text" placeholder="收货人手机号" v-model="list.userphone">
      </div>
      <div class="addressadd-input-item">
        <p>
          地区
        </p>
        <input type="text" :value="`${selectedAreaProvince}/ ${selectedAreaCity} /${selectedAreaDistrict}`"
          v-if="selectedAreaProvince">
        <input type="text" placeholder="请选择省 / 市 / 区" readonly @click="isPickerVisible = true"
          v-if="!selectedAreaProvince" :value="this.list.location">
      </div>
      <div class="addressadd-input-item">
        <p>
          详细地址
        </p>
        <input type="text" placeholder="请输入详细地址" v-model="list.useraddress">
      </div>
      <div class="addressadd-input-item">
        <p>
          邮政编码
        </p>
        <input type="text" placeholder="请输入邮政编码" v-model="list.postcode">
      </div>
      <div class="addressadd-input-item" style="border: 0;">
        <p>
          标签
        </p>
        <input type="text" placeholder="请输入标签" v-model="list.label">
      </div>
    </div>
    <!-- 是否设为默认收货地址 -->
    <div class="addressadd-input-checkbox">
      <p>
        设为默认收货地址
      </p>
      <input type="checkbox" v-model="list.status">
    </div>
    <div class="addressadd-submit">
      <button @click="handleSubmit">
        保存
      </button>
      <button @click="handleRemove">
        删除
      </button>
    </div>
    <AreaPicker :showDefault.sync="isPickerVisible" :selectedAreaProvince.sync="selectedAreaProvince"
      :selectedAreaCity.sync="selectedAreaCity" :selectedAreaDistrict.sync="selectedAreaDistrict"></AreaPicker>
  </div>
</template>
<script>

import vueHeader from '@/components/common/header/header.vue';
import AreaPicker from '@/components/common/AreaPicker.vue';
import { addAddressPostAPI, removeAddressPostAPI } from '@/api/ress/editress';
import { getAddressList } from "@/api/ress/addresslist";

export default {
  components: {
    vueHeader,
    AreaPicker
  },
  data() {
    return {
      id: this.$route.query.id,
      isPickerVisible: false,
      selectedAreaProvince: '',
      selectedAreaCity: '',
      selectedAreaDistrict: '',
      uid: '',
      list: {
        username: '',
        userphone: '',
        location: '',
        useraddress: '',
        postcode: '',
        label: '',
        regioncode: '',
        status: 0
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      let userInfo = JSON.parse(localStorage.getItem('userInfo'));
      this.uid = userInfo.uid;
      let res = await getAddressList({
        uid: this.uid
      })
      console.log(res);

      const list = res.list.find(item => item.id == this.id)
      if (list) {
        this.list.label = list.label
        this.list.username = list.username
        this.list.userphone = list.userphone
        this.list.useraddress = list.useraddress
        this.list.postcode = list.regioncode
        this.list.status = list.status
        this.list.location = list.location
      }
    },
    async handleSubmit() {
      if()
      const data = {
        id: this.$route.query.id,
        username: this.list.username,
        userphone: this.list.userphone,
        regioncode: this.list.postcode,
        location: this.list.location,
        useraddress: this.list.useraddress,
        status: this.list.status,
        label: '公司'
      }
      let res = await addAddressPostAPI(data);
      if (res.code === 200) {
        this.$router.push({ name: 'addresslist' })
        this.$toast.show('编辑成功', 'success', 'top')
      }
    },
    async handleRemove() {
      let res = await removeAddressPostAPI({
        id: this.$route.query.id
      })
      if (res.code === 200) {
        this.$router.push({ name: 'addresslist' })
        this.$toast.show('删除成功', 'error', 'top')
      }
    }
  }
}
</script>